<template>
  <el-card>
    <div slot="header">
      <h3>{{ pageTitle }}</h3>
    </div>
    <div class="body_wrap">
      <el-row>
        <el-col :span="12">
          <span>供应商：</span>
          <span>{{ supplyInfo.supplyName }}</span>
        </el-col>
        <el-col :span="6">
          <span>供应商主营品类：</span>
          <span>{{ supplyInfo.supMainCategoryName }}</span>
        </el-col>
        <el-col :span="6">
          <span>供应商管理区域：</span>
          <span>{{ supplyInfo.supManagerHrAreaName }}</span>
        </el-col>
      </el-row>
      <el-row class="item_wrap">
        <el-col>
          <span>运费承担方：</span>
          <span>{{ supplyInfo.whoPayFreight }}</span>
        </el-col>
      </el-row>
      <!-- 发起原因输入框 -->
      <LaunchReasonInput
        :reason.sync="launchReason"
        :isDisabled="true"
      />
      <el-row class="item_wrap">
        <h4>参考城市比例：</h4>
        <basic-table
          :showSelectCol="false"
          :showPagination="false"
          :columns="referenceInfo.columns"
          :dataSource="referenceInfo.list"
        />
      </el-row>
      <el-row class="item_wrap">
        <el-row type="flex" justify="space-between">
          <h4>供货价格相关信息维护如下：</h4>
          <el-button
            type="text"
            size="large"
            @click="handleExportData"
          >模板导出</el-button
          >
        </el-row>
        <general-table
          :columns="supplyPurchase.columns"
          :dataSource="supplyPurchase.list"
        />
      </el-row>
      <FooterFields :footerFields="footerFields" />
    </div>
  </el-card>
</template>
<script>
import { ApiRequest, ApiRequestExportTable } from '@api/basePage';
import BasicTable from '@/components/BasicTable';
import GeneralTable from '@/pages/commodity/modules/components/generalTable';
import FooterFields from '@/pages/commodity/components/FooterFields';
import LaunchReasonInput from '@/components/LaunchReasonInput';
import { generateUuid } from '@/utils/bizUtils';
export default {
  components: {
    BasicTable,
    GeneralTable,
    FooterFields,
    LaunchReasonInput
  },
  data () {
    return {
      launchReason: '', // 发起原因
      supplyInfo: {
        supplyUuid: '',
        supplyName: '', // 供应商名称
        supMainCategoryName: '', // 供应商主营品类
        supManagerHrAreaName: '', // 供应商管理区域
        whoPayFreight: '' // 运费承担方
      },
      footerFields: {}, // 表尾字段
      /* 参照城市关系信息 */
      referenceInfo: {
        list: [],
        columns: [
          {
            title: '销售城市',
            key: 'saleCityName',
          },
          {
            title: '是否供货',
            render: (h, { row }) => {
              let isSupplyStr = '';
              if (row.isSupply === '1') {
                isSupplyStr = '是';
              }
              if (row.isSupply === '2') {
                isSupplyStr = '否';
              }
              return (
                <div>{ isSupplyStr }</div>
              )
            }
          },
          {
            title: '区域',
            key: 'saleAreaName',
          },
          {
            title: '参照城市',
            key: 'templateCityName',
          },
          {
            title: '进价比例',
            key: 'buyPriceRatio',
          },
          {
            title: '成本价比例',
            key: 'costPriceRatio',
          }
        ]
      },
      supplyPurchase: {
        columns: [],
        list: []
      },
      multipleColumns: [],
      pageTitle: '', // 页面标题
      productType: '', // 用来区分单计量还是多计量的，1是单计量，2是多计量
      supplyPriceType: '', // 进价类型，1是统一进价，2是区域进价
    }
  },
  mounted () {
    let { type, recordNo } = this.$route.query;
    if (type === '单计量') {
      this.supplyPurchase.columns = this.getSingleColumnsFn();
      this.productType = 1;
      this.pageTitle = '查看多供进价(单计量)信息';
    }
    if (type === '多计量') {
      this.supplyPurchase.columns = this.getMultipleColumnsFn();
      this.productType = 2;
      this.pageTitle = '查看多供进价(多计量)信息';
    }
    if (!recordNo) { return false }
    this.getDataInfoAction(recordNo);
  },
  methods: {
    getDataInfoAction (recordNo) {
      let tableLoading = this.$loading({
        target: '.body_wrap'
      });
      let data = {};
      ApiRequest(
        `/sysback/supplyarea/getCreateDetailByRecordNo?recordNo=${recordNo}`,
        'post',
        data,
        false
      ).then((res) => {
        tableLoading.close();
        if (res.retStatus !== '1') { return false }
        let { productRel, recordDetail, supplyArea, supplyAreaPrice } = res.retData;
        this.supplyPriceType = productRel.supplyPriceType; // 进价类型
        this.supplyInfo = {
          supplyUuid: productRel.supplyUuid,
          supplyName: productRel.supplyName,
          supMainCategoryName: productRel.supMainCategoryName,
          supManagerHrAreaName: productRel.supManagerHrAreaName,
          whoPayFreight: productRel.whoPayFreight
        }
        this.footerFields = recordDetail;
        this.launchReason = recordDetail.launchReason; // 发起原因
        this.referenceInfo.list = supplyArea;
        this.supplyPurchase.list = supplyAreaPrice;
        if (this.supplyPriceType === '1' && this.productType === 1) {
          this.supplyPurchase.columns = this.getSingleColumnsFn(true);
        }
        if (this.supplyPriceType === '1' && this.productType === 2) {
          this.supplyPurchase.columns = this.getMultipleColumnsFn(true);
        }
      }).catch(() => {
        tableLoading.close();
      })
    },
    handleExportData () {
      let uuid = generateUuid();
      ApiRequestExportTable(
        `/sysback/supplyareaprice/downLoadTemplateForSupplyMorePriceRecord/${this.$route.query.recordNo}`,
        'post',
        false
      )
        .then(res => {
          const blob = new Blob([res], {
            type: 'application/octet-stream'
          });
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = `多供进价-${this.$route.query.type}模板_${uuid}.xlsx`;
          link.click();
          window.URL.revokeObjectURL(blob); // 释放掉blob对象
        })
        .catch(() => {
          this.$message.error('导出失败');
        });
    },
    /* 单计量columns */
    getSingleColumnsFn (notShowFlag) {
      let columns = [
        {
          title: 'SKU编码',
          key: 'skuNo',
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
        },
        {
          title: '城市',
          key: 'templateCityName',
        },
        {
          title: '业务区域',
          key: 'templateCitySaleAreaName',
        },
        {
          title: '商品名称',
          key: 'productName',
        },
        {
          title: '规格',
          key: 'specDetailStr',
        },
        {
          title: '供货计量单位',
          key: 'supplyGoodsUnit',
        },
        {
          title: '主计量单位',
          key: 'unitName',
        },
        {
          title: '进价类型',
          key: 'purchasePriceTypeStr'
        },
        {
          title: '主计量进价',
          key: 'mainPurchasePrice',
        },
        {
          title: '加价类型',
          key: 'addPriceTypeStr'
        },
        {
          title: '运费比例或金额',
          key: 'freightRatio',
        },
        {
          title: '包装比例或金额',
          key: 'packRatio',
        },
        {
          title: '加工费比例或金额',
          key: 'processChargesRatio',
        },
        {
          title: '返利折合比例或金额',
          key: 'rebateRatio',
        },
        {
          title: '返利说明',
          key: 'rebateRatioDesc',
        },
        {
          title: '成本价',
          key: 'mainUnitCostPrice',
        }
      ]
      if (notShowFlag) {
        columns.splice(2, 2);
      }
      return columns;
    },
    /* 多计量columns */
    getMultipleColumnsFn (notShowFlag) {
      let columns = [
        {
          title: 'SKU编码',
          key: 'skuNo',
        },
        {
          title: 'SPU编码',
          key: 'spuNo',
        },
        {
          title: '城市',
          key: 'templateCityName',
        },
        {
          title: '业务区域',
          key: 'templateCitySaleAreaName',
        },
        {
          title: '商品名称',
          key: 'productName',
        },
        {
          title: '规格',
          key: 'specDetailStr',
        },
        {
          title: '供货计量单位',
          key: 'supplyGoodsUnit',
        },
        {
          title: '主计量单位',
          key: 'unitName',
        },
        {
          title: '理论转换率',
          key: 'theoryConvertRatio',
        },
        {
          title: '实际转换率',
          key: 'actualConvertRatio',
        },
        {
          title: '进价类型',
          key: 'purchasePriceTypeStr'
        },
        {
          title: '辅计量进价',
          key: 'purchasePrice',
        },
        {
          title: '主计量进价',
          key: 'mainPurchasePrice',
        },
        {
          title: '加价类型',
          key: 'addPriceTypeStr'
        },
        {
          title: '运费比例或金额',
          key: 'freightRatio',
        },
        {
          title: '包装比例或金额',
          key: 'packRatio',
        },
        {
          title: '加工费比例或金额',
          key: 'processChargesRatio',
        },
        {
          title: '返利折合比例或金额',
          key: 'rebateRatio',
        },
        {
          title: '返利说明',
          key: 'rebateRatioDesc',
        },
        {
          title: '实际转换率辅计量成本价',
          key: 'actualConvertRatioCostPrice',
        },
        {
          title: '理论转换率辅计量成本价',
          key: 'theoryConvertRatioCostPrice',
        },
        {
          title: '主计量成本价',
          key: 'mainUnitCostPrice',
        }
      ]
      if (notShowFlag) {
        columns.splice(2, 2);
      }
      return columns;
    }
  }
}
</script>
<style lang="less" scoped>
.item_wrap {
  margin-top: 15px;
}
.el-col-6 {
  min-width: auto;
}
</style>
